<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>canvg.js test</title>
    <link rel="stylesheet" href="./index.css">
    <script defer src="./v2/rgbcolor.min.js"></script>
    <script defer src="./v2/stackblur.min.js"></script>
    <script defer src="./v2/canvg.js"></script>
    <script defer src="../../dist/umd.js"></script>
    <script defer src="./index.js"></script>
  </head>
  <body>
    <h1 class="title">
      <a href="https://github.com/canvg/canvg">canvg</a> examples
    </h1>
    <div class="message">
      <a
        href="https://github.com/canvg/canvg/issues"
        target="_blank"
      >
        need a feature? have a bug or issue? svg not rendering? log it here!
      </a>
    </div>
    <table class="table settings">
      <thead>
        <tr>
          <th>
            <h2>
              Select an example...
            </h2>
          </th>
          <th>
            <h2>
              Or use your own:
            </h2>
          </th>
          <th>
            <h2>
              Options:
            </h2>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <form id="gallery">
              <select name="examples">
                <option value="">Select an example:</option>
                <optgroup label="complex">
                  <option value="1.svg">soccer</option>
                  <option value="22.svg">world</option>
                  <option value="23.svg">tiger</option>
                  <option value="25.svg">butterfly</option>
                  <option value="26.svg">floorplan</option>
                </optgroup>
                <optgroup label="basic shapes">
                  <option value="2.svg">all</option>
                  <option value="8.svg">layers</option>
                </optgroup>
                <optgroup label="paths">
                  <option value="10.svg">line</option>
                  <option value="11.svg">poly</option>
                  <option value="13.svg">path</option>
                  <option value="15.svg">curve</option>
                  <option value="27.svg">arcs</option>
                  <option value="29.svg">markers</option>
                </optgroup>
                <optgroup label="gradients &amp; patterns">
                  <option value="16.svg">linear</option>
                  <option value="18.svg">radial</option>
                  <option value="19.svg">radial focus</option>
                  <option value="30.svg">pattern</option>
                  <option value="34.svg">transform</option>
                </optgroup>
                <optgroup label="animations">
                  <option value="20.svg">indefinite</option>
                  <option value="21.svg">multiple</option>
                </optgroup>
                <optgroup label="text">
                  <option value="35.svg">glyphs</option>
                  <option value="36.svg">external</option>
                  <option value="37.svg">textPath</option>
                </optgroup>
                <optgroup label="other">
                  <option value="33.svg">masks</option>
                  <option value="24.svg">units</option>
                  <option value="28.svg">viewport</option>
                  <option value="31.svg">links</option>
                  <option value="32.svg">images</option>
                  <option value="favicon.svg">favicon</option>
                </optgroup>
              </select>
              <select name="issues">
                <option value="">Select an Issue:</option>
                <option value="issue3.svg">Issue #3: radial gradient (broken)</option>
                <option value="issue8.svg">Issue #8: stroke linecap</option>
                <option value="issue24.svg">Issue #24: clipPath</option>
                <option value="issue25.svg">Issue #25: stroke-linejoin</option>
                <option value="issue30.svg">Issue #30: text-anchor</option>
                <option value="issue31.svg">Issue #31: font-size</option>
                <option value="issue32.svg">Issue #32: font-family</option>
                <option value="issue33.svg">Issue #33: font-style</option>
                <option value="issue34.svg">Issue #34: font-weight</option>
                <option value="issue35.svg">Issue #35: gradient strokes</option>
                <option value="issue36.svg">Issue #36: marker</option>
                <option value="issue38.svg">Issue #38: tspan</option>
                <option value="issue39.svg">Issue #39: tref</option>
                <option value="issue40.svg">Issue #40: pattern</option>
                <option value="issue41.svg">Issue #41: symbol</option>
                <option value="issue42.svg">Issue #42: polyline marker</option>
                <option value="issue44.svg">Issue #44: inner links</option>
                <option value="issue45.svg">Issue #45: gradient transform (broken)</option>
                <option value="issue46.svg">Issue #46: multi-line text</option>
                <option value="issue48.svg">Issue #48: complex radial gradient</option>
                <option value="issue50.svg">Issue #50: gradient changing paths</option>
                <option value="issue52.svg">Issue #52: stroke dash support</option>
                <option value="issue54.svg">Issue #54: path control points</option>
                <option value="issue55.svg">Issue #55: clipPath</option>
                <option value="issue57.svg">Issue #57: use and def</option>
                <option value="issue57b.svg">Issue #57b: complex gradient</option>
                <option value="issue66.svg">Issue #66: gaussian blur</option>
                <option value="issue67.svg">Issue #67: complex paths</option>
                <option value="issue70.svg">Issue #70: bounding box (broken - missing shadow)</option>
                <option value="issue71.svg">Issue #71: glyph</option>
                <option value="issue73.svg">Issue #73: animation fill freeze</option>
                <option value="issue75.svg">Issue #75: path command z</option>
                <option value="issue76.svg">Issue #76: fill rule even odd</option>
                <option value="issue77.svg">Issue #77: inherited stroke colors</option>
                <option value="issue79.svg">Issue #79: use width height</option>
                <option value="issue82.svg">Issue #82: external font</option>
                <option value="issue85.svg">Issue #85: arabic glyphs</option>
                <option value="issue88.svg">Issue #88: centered text</option>
                <option value="issue89.svg">Issue #89: gradient transforms</option>
                <option value="issue91.svg">Issue #91: opacity masks</option>
                <option value="issue94.svg">Issue #94: visibility attribute</option>
                <option value="issue97.svg">Issue #97: slow loading time</option>
                <option value="issue98.svg">Issue #98: path error</option>
                <option value="issue99.svg">Issue #99: tspan offset</option>
                <option value="issue104.svg">Issue #104: linear gradient</option>
                <option value="issue106.svg">Issue #106: gradient transform</option>
                <option value="issue108.svg">Issue #108: non-scaling-stroke</option>
                <option value="issue112.svg">Issue #112: marker orientation</option>
                <option value="issue114.svg">Issue #114: text anchor</option>
                <option value="issue115.svg">Issue #115: marker orientation</option>
                <option value="issue116.svg">Issue #116: text dominant baseline</option>
                <option value="issue117.svg">Issue #117: svg logo</option>
                <option value="issue121.svg">Issue #121: ellipse animation</option>
                <option value="issue122.svg">Issue #122: radial gradient (broken - don't scale)</option>
                <option value="issue125a.svg">Issue #125a: complex path and gradient</option>
                <option value="issue125b.svg">Issue #125b: complex path and gradient</option>
                <option value="issue128.svg">Issue #128: markers (broken - don't align)</option>
                <option value="issue132.svg">Issue #132: radial gradients (broken - don't scale)</option>
                <option value="issue134.svg">Issue #134: positioning</option>
                <option value="issue135.svg">Issue #135: gradient transform (broken)</option>
                <option value="issue137.svg">Issue #137: positioning (broken)</option>
                <option value="issue138.svg">Issue #138: image in pattern (broken)</option>
                <option value="issue142.svg">Issue #142: stroke dash support</option>
                <option value="issue144.svg">Issue #144: large complex</option>
                <option value="issue145.svg">Issue #145: css id selector</option>
                <option value="issue158.svg">Issue #158: complex w/ data images (broken - missing images in circles)</option>
                <option value="issue161.svg">Issue #161: google chart gradient (svg error)</option>
                <option value="issue166.svg">Issue #166: custom glyphs</option>
                <option value="issue172.svg">Issue #172: cylinder gradient (broken - radial gradient off)</option>
                <option value="issue175.svg">Issue #175: stroke width</option>
                <option value="issue176.svg">Issue #176: rounded rectangles</option>
                <option value="issue178.svg">Issue #178: pattern offset</option>
                <option value="issue179.svg">Issue #179: animate rotate transform center</option>
                <option value="issue180.svg">Issue #180: pattern x offset width (open)</option>
                <option value="issue181.svg">Issue #181: linear gradient (broken - not appearing)</option>
                <option value="issue182.svg">Issue #182: blur (broken - a bit off on intensity)</option>
                <option value="issue183.svg">Issue #183: mask error</option>
                <option value="issue184.svg">Issue #184: transformed pattern</option>
                <option value="issue187.svg">Issue #187: nested tspans</option>
                <option value="issue195.svg">Issue #195: gray filter</option>
                <option value="issue196.svg">Issue #196: incorrect radial gradient</option>
                <option value="issue197.svg">Issue #197: non smooth lines</option>
                <option value="issue202.svg">Issue #202: text anchor middle</option>
                <option value="issue202b.svg">Issue #202b: text anchor middle</option>
                <option value="issue206.svg">Issue #206: blur</option>
                <option value="issue211.svg">Issue #211: transform</option>
                <option value="issue212.svg">Issue #212: path shorthand quadratic bezier</option>
                <option value="issue217.svg">Issue #217: advanced css support</option>
                <option value="issue227.svg">Issue #227: clip path transform</option>
                <option value="issue229.svg">Issue #229: text anchor from style</option>
                <option value="issue231.svg">Issue #231: clip from style</option>
                <option value="issue234.svg">Issue #234: use / symbol</option>
                <option value="issue234b.svg">Issue #234b: use / symbol</option>
                <option value="issue234c.svg">Issue #234c: use / symbol</option>
                <option value="issue234d.svg">Issue #234d: use / symbol</option>
                <option value="issue234e.svg">Issue #234e: use / symbol</option>
                <option value="issue238.svg">Issue #238: improper clip context / FF stroke</option>
                <option value="issue241.svg">Issue #241: feColorMatrix</option>
                <option value="issue244.svg">Issue #244: text baseline</option>
                <option value="issue255.svg">Issue #255: transform parsing</option>
                <option value="issue268.svg">Issue #268: tspan dx dy not affecting x y</option>
                <option value="issue269.svg">Issue #269: opacity in e-notation</option>
                <option value="issue273.svg">Issue #273: fill freeze animation</option>
                <option value="issue277.svg">Issue #277: pattern parent opacity</option>
                <option value="issue282.svg">Issue #282: treat clip path as attribute</option>
                <option value="issue289.svg">Issue #289: multiple clip</option>
                <option value="issue322.svg">Issue #322: path parsing</option>
                <option value="issue352.svg">Issue #352: transform as style</option>
                <option value="issue358.svg">Issue #358: patternTransform rotate offset</option>
                <option value="issue362.svg">Issue #362: text tspan dx dy offset fixes</option>
                <option value="issue366.svg">Issue #366: referenced gradients</option>
                <option value="issue372.svg">Issue #372: referenced gradients</option>
                <option value="issue376.svg">Issue #376: recurring css class definitions</option>
                <option value="issue510.svg">Issue #510: nested opacity</option>
                <option value="issue610.svg">Issue #610: rounded rectangle corner bezier</option>
                <option value="issue454.svg">Issue #454: stroke dash offset on a line</option>
                <option value="issue454b.svg">Issue #454b: stroke dash offset on a line</option>
                <option value="issue473.svg">Issue #473: stroke dash on arc</option>
                <option value="issue615.svg">Issue #615: transform on clip</option>
                <option value="issue342.svg">Issue #342: text gradient</option>
                <option value="issue620.svg">Issue #620: em font size</option>
                <option value="issue320.svg">Issue #320: rem font size</option>
                <option value="issue564.svg">Issue #564: tspan text-anchor</option>
                <option value="issue556.svg">Issue #556: mask using alpha</option>
                <option value="issue717.svg">Issue #717: em font size</option>
                <option value="issue406.svg">Issue #406: refX and refY is invalid when draw the marker</option>
                <option value="issue690.svg">Issue #690: vh, vw, vmin, vmax</option>
                <option value="issue694.svg">Issue #694: support forward references in use elements</option>
                <option value="issue713.svg">Issue #713: scale 0 not applied</option>
                <option value="issue735.svg">Issue #735: Incorrect refX, refY and viewport clip</option>
                <option value="issue748.svg">Issue #748: relative font-sizes</option>
                <option value="issue750.svg">Issue #750: em stack</option>
                <option value="issue757.svg">Issue #757: transform-origin css</option>
                <option value="issue782a.svg">Issue #782a: Incorrect text-anchor, dx, dy, x and y</option>
                <option value="issue782b.svg">Issue #782b: Incorrect text-anchor, dx, dy, x and y</option>
                <option value="issue816.svg">Issue #816: Handle empty bounding box</option>
                <option value="issue832.svg">Issue #832: Correct translate parsing</option>
                <option value="issue870.svg">Issue #870: image loading</option>
                <option value="issue869.svg">Issue #869: box size from styles</option>
                <option value="issue941.svg">Issue #941: check ellipse radiuses</option>
                <option value="issue747.svg">Issue #747: check filter size before draw</option>
                <option value="issue945.svg">Issue #945: default currentColor</option>
                <option value="issue946.svg">Issue #946: invalid path tokenizer</option>
                <option value="issue897a.svg">Issue #897: invalid transform on element with filter</option>
                <option value="issue897b.svg">Issue #897: invalid transform on element with mask</option>
                <option value="issue908.svg">Issue #908: css imports</option>
                <option value="issue1001.svg">Issue #1001: incorrect rect sizing</option>
                <option value="issue1045.svg">Issue #1045: overflow visible style</option>
                <option value="issue1063.svg">Issue #1063: opacity in use symbol</option>
                <option value="issue1111.svg">Issue #1111: unable to darken with feColorMatrix</option>
                <option value="issue977.svg">Issue #977: transform origin</option>
                <option value="issue1196.svg">Issue #1196: path parser</option>
                <option value="issue1161.svg">Issue #1161: textPath with dx and dy</option>
                <option value="issue1364.svg">Issue #1364: path parser</option>
                <option value="issue1460.svg">Issue #1460: matrix transform origin</option>
                <option value="issue1516.svg">Issue #1516: pseudo node styles</option>
              </select>
            </form>
          </td>
          <td>
            <form id="custom">
              <textarea
                name="svg"
              >&lt;svg&gt;&lt;text x=&quot;50&quot; y=&quot;50&quot;&gt;Hello World!&lt;/text&gt;&lt;/svg&gt;</textarea>
              <br>
              <label>
                width:
                <input
                  name="width"
                  type="number"
                  value="500"
                >
              </label>
              <label>
                height:
                <input
                  name="height"
                  type="number"
                  value="500"
                >
              </label>
              <label>
                preserveAspectRatio:
                <input
                  name="preserveAspectRatio"
                  type="text"
                  value="xMidYMid meet"
                >
              </label>
              <label>
                resize:
                <input
                  name="resize"
                  type="checkbox"
                >
              </label>
              <button>
                Render
              </button>
            </form>
          </td>
          <td>
            <form id="options">
              <label>
                Redraw: <input
                  name="redraw"
                  value="redraw"
                  type="checkbox"
                  checked
                >
              </label>
              <br>
              <label>
                V3: <input
                  name="render"
                  value="v3"
                  type="radio"
                  checked
                >
              </label>
              <br>
              <label>
                V3 OffscreenCanvas: <input
                  name="render"
                  value="offscreen"
                  type="radio"
                >
              </label>
              <br>
              <label>
                V2: <input
                  name="render"
                  value="v2"
                  type="radio"
                >
              </label>
            </form>
          </td>
        </tr>
      </tbody>
    </table>
    <table class="table preview">
      <thead>
        <tr>
          <th>
            <h2>
              Canvg output:
            </h2>
          </th>
          <th>
            <h2>
              SVG output:
            </h2>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>
            <div
              id="canvas"
              class="output"
            ></div>
          </td>
          <td>
            <div
              id="svg"
              class="output"
            ></div>
          </td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
